<template>
  <a-modal
    title="弹框"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div class="modal-content">
      <WtEcharts ref="wtEcharts" width="100%" height="100%" />
    </div>
  </a-modal>
</template>

<script>
import WtEcharts from '@/components/005-wt-echarts/index.vue'
export default {
  name: 'xxx',
  components: {
    WtEcharts
  },
  props: {},
  data() {
    return {
      visible: false
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.init()
  },
  activated() {},
  deactivated() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    init() {
      this.visible = true
      this.$nextTick(() => {
        const option = {
          axisPointer: {
            link: { xAxisIndex: 'all' }
          },
          tooltip: {
            trigger: 'axis'
            /* formatter: params => {
            console.log('params', params); // 是个数组
            params.forEach(item => {
            })
          } */
          },
          xAxis: [
            {
              gridIndex: 0,
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            {
              gridIndex: 1,
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            }
          ],
          yAxis: [
            {
              name: '比差评估值(%)',
              gridIndex: 0,
              type: 'value'
            },
            {
              name: "角差评估值(')",
              gridIndex: 1,
              type: 'value'
            }
          ],
          series: [
            {
              gridIndex: 0,
              xAxisIndex: 0,
              yAxisIndex: 0,
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'bar'
            },
            {
              gridIndex: 1,
              xAxisIndex: 1,
              yAxisIndex: 1,
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line'
            }
          ],
          grid: [
            {
              // 这是控制上面的bar
              left: '6%',
              right: '3%',
              top: '5%',
              bottom: '12%',
              height: '35%',
              containLabel: false
            },
            {
              // 控制下面的line
              left: '6%',
              right: '3%',
              top: '50%',
              bottom: '12%',
              height: '35%',
              containLabel: false
            }
          ]
        }
        this.$refs.wtEcharts.initChart(option)
      })
    },
    handleOk() {
      this.visible = false
    },
    handleCancel() {
      this.visible = false
    }
  },
  filters: {}
}
</script>
<style scoped lang="scss">
.modal-content {
  height: 400px;
  border: 1px solid red;
}
</style>
